<template>
  <div class="app-container">
    <el-row>
      <el-col>
        <el-select v-model="queryParams.year" placeholder="选择年份" @change="handleYearChange">
          <el-option v-for="item in dict.type.biz_work_year_list" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
        <el-select v-model="queryParams.quarter" placeholder="选择季度" class="ml-10" @change="handleQuarterChange">
          <el-option v-for="item in quarterOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
        <!-- <el-select v-model="queryParams.deptId" placeholder="选择待查询部门" class="ml-10" @change="handleRefresh">
          <el-option v-for="item in deptOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select> -->
      </el-col>
    </el-row>
    <div class="text-banner">
      <span>中心工作情况汇总（共 {{ columnList.length }} 项）</span>
      <el-button size="mini" type="primary" circle icon="el-icon-refresh" plain @click="handleRefresh" />
    </div>
    <div>
      <el-button
        icon="el-icon-s-claim"
        size="mini"
        type="primary"
        plain
        @click="handleSubmit"
        class="float-right mb-10"
        :disabled="centerWorkLoading"
        v-hasPermi="['work-assessment:center-supervision:submit']"
        >提交打分</el-button
      >
    </div>

    <div class="table">
      <el-table
        :data="centerWorkList"
        border
        style="width: 100%"
        height="100%"
        v-loading="centerWorkLoading"
        ref="table"
        @selection-change="handleSelectionChange($event, index)"
      >
        <el-table-column label="序号" type="index" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="deptName" label="站办所" align="center"></el-table-column>
        <el-table-column v-for="(item, index) in columnList" :key="index" :label="item.label" width="160" align="center" show-overflow-tooltip>
          <template slot="header">
            <el-tooltip effect="dark" :content="item.label" placement="top-start">
              <span style="white-space: pre-wrap; color: #409eff" @click="handleOpenDetail(item)"> {{ item.label }}</span>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.deptCenterWorkScoreList[index].supervisionScore"
              placeholder="核查得分"
              controls-position="right"
              :min="0"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="remarks" width="200" align="center" fixed="right">
          <template slot-scope="scope">
            <el-input v-model="scope.row.remarks" placeholder="输入备注" type="textarea" :rows="1" :autosize="{ minRows: 1, maxRows: 5 }"></el-input>
            <!-- <span v-show="checkWorkPlanDisabled()">{{ scope.row.remarks || '-' }}</span> -->
          </template>
        </el-table-column>
        <el-table-column label="总得分" width="80" align="center" fixed="right">
          <template slot-scope="scope">
            <span>{{ rowScoreCompute(scope.row) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <FilePreview :visible.sync="filePreviewVisible" :file="previewFile"></FilePreview>
    <CenterWorkCompletion :visible.sync="isCenterWorkCompletion" :work="centerWorkCompletionQuery"></CenterWorkCompletion>
  </div>
</template>

<script>
import { centerWorkAssessment, centerWorkAssessmentList as listPlan } from '@/api/work-assessment'
import { quarterFormat } from '@/utils/quarter.js'
import FilePreview from '@/components/FilePreview'
import { mixins } from '@/mixins'
import CenterWorkCompletion from '@/views/work/work-completion/components/CenterWorkCompletion'
export default {
  name: 'center-supervision',
  mixins: [mixins],
  dicts: ['biz_work_year_list', 'biz_work_nature', 'biz_work_score_type'],
  props: {},
  components: { FilePreview, CenterWorkCompletion },
  data() {
    return {
      centerWorkCompletionQuery: {},
      isCenterWorkCompletion: false,
      filePreviewVisible: false,
      previewFile: {},
      columnList: [],
      keyWorkTotal: 0,
      centerWorkList: [],
      centerWorkLoading: false,
      quarterOptions: [],
      deptOptions: [],
      queryParams: {
        year: '',
        quarter: '',
        workType: 'ZDGZ',
        deptId: '',
        workReportMark: true,
        reportAuditStatusDictList: 'SHTG'
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    this.handleYearChange(new Date().getFullYear())
  },
  methods: {
    /** 查看中心工作详情 */
    handleOpenDetail(raw) {
      this.centerWorkCompletionQuery = { id: raw.centerWorkId }
      this.isCenterWorkCompletion = true
    },
    // 表格行分数计算
    rowScoreCompute(raw) {
      let sum = raw.deptCenterWorkScoreList.reduce((prev, curr) => {
        return prev + curr.supervisionScore
      }, 0)
      return sum
    },
    // 预览文件
    handlePreviewFile(url) {
      let fileItem = this.formatFileUrl(url)
      this.previewFile = { url, ...fileItem }
      this.filePreviewVisible = true
    },
    // 提交表单打分
    handleSubmit() {
      let params = []
      for (let item of this.centerWorkList) {
        for (let workItem of item.deptCenterWorkScoreList) {
          params.push({ id: workItem.id, supervisionScore: workItem.supervisionScore, remarks: item.remarks })
        }
      }
      centerWorkAssessment(params).then(res => {
        this.$modal.msgSuccess('已提交')
        this.handleRefresh()
      })
    },
    // 刷新
    handleRefresh() {
      this.getList()
    },

    // 年度选择
    handleYearChange(year) {
      this.queryParams.year = year
      // 获取当前季度、季度列表（往年默认第一季度）
      let { quarter, quarterList } = quarterFormat(year)
      this.quarterOptions = quarterList
      this.handleQuarterChange(quarter)
    },
    // 季度选择
    handleQuarterChange(quarter) {
      this.queryParams.quarter = quarter
      this.handleRefresh()
    },
    getList() {
      this.centerWorkLoading = true
      listPlan(this.queryParams)
        .then(res => {
          this.centerWorkLoading = false
          let { data, total } = res
          this.keyWorkTotal = total
          let columns = data[0]['deptCenterWorkScoreList']
          let columnList = columns.map((item, index) => {
            return {
              id: item.id,
              centerWorkId: item.centerWorkId,
              label: `${item.normName}\n（${item.planScore}分）`,
              file: item.completionMaterialUrls
            }
          })
          this.columnList = columnList
          this.centerWorkList = data
          this.$nextTick(() => {
            this.$refs['table'].doLayout()
          })
        })
        .catch(err => (this.centerWorkLoading = false))
    }
  }
}
</script>

<style lang="scss" scoped>
.file-preview-btn {
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-left: 0;
  padding: 0;
}

::v-deep .el-input-number--medium {
  width: auto;
}

.app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .table {
    flex: 1;
    overflow-y: hidden;
  }
}
</style>
